<template>
  <div class="form-cells">
    <headTit :tit="tit"></headTit>
    <div class="con">
      <div class="form1">
        <div class="row">
          <label>姓名</label>
          <div class="cell">
            <input type="text" placeholder="请填写姓名">
          </div>
        </div>
        <div class="row">
          <label>手机号</label>
          <div class="cell">
            <input type="text" placeholder="请填写手机号">
          </div>
        </div>
        <div class="row">
          <label>性别</label>
          <div class="cell">
            <div class="radiobox">
              <ul class="radiocell">
                <li class="on">男</li>
                <li>女</li>
              </ul>
              <div class="moveblock"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <label >星期</label>
          <div class="cell">
            <div class="radiobox">
              <ul class="radiocell">
                <li class="on">日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
              </ul>
              <div class="moveblock"></div>
            </div>
          </div>
        </div>
        <div class="row multiple_row">
          <label >标签</label>
          <div class="cell">
            <div class="checkbox">
              <ul class="checkboxcell">
                <li class="on">人物</li>
                <li>风景</li>
                <li>动漫</li>
                <li>建筑</li>
                <li>汽车</li>
                <li>科技</li>
                <li class="on">金融</li>
                <li>动物</li>
                <li>星际</li>
                <li>海洋</li>
                <li class="warn">最多可选三项</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <label>日期</label>
          <div class="cell">
            <input type="date" placeholder="请选择日期">
          </div>
        </div>
        <div class="row">
          <label>城市</label>
          <div class="cell">
            <div class="selectbox">
              <select >
                <option value="sz">深圳</option>
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="xg">香港</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row textarea_row">
          <label >留言</label>
          <div class="cell">
            <textarea placeholder="请输入留言" class="textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="sliderbox">
        <div class="sliderdes">游玩天数 : 7天</div>
        <div class="slidercomp">
          <Xslider></Xslider>
        </div>
      </div>
      <div class="sliderbox">
        <div class="sliderdes">自定义 : 10</div>
        <div class="slidercomp">
          <Xslider></Xslider>
        </div>
      </div>
      <div class="switchbox">
        <div class="switchdes">
          是否保存为常用信息？
        </div>
        <div class="switchcomp">
          <Xswitch></Xswitch>
        </div>
      </div>
      <div class="switchbox">
        <div class="switchdes">
          我是不是美女？
        </div>
        <div class="switchcomp">
          <Xswitch></Xswitch>
        </div>
      </div>
      <div class="formButton">
        <div class="button">提交</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import headTit from '../../components/headTit/headTit.vue';
import Xswitch from '../../components/switch/switch.vue';
import Xslider from '../../components/slider/slider.vue';

export default {
  components: {
    headTit,
    Xswitch,
    Xslider
  },
  data () {
    return {
      tit: '表单输入'
    };
  }
};
</script>

<style lang="scss" scoped>
  .form-cells {
    .con {
      .form1{
        .row {
          padding-left: 15px;

          label{
            width: 67px;
            border-right:1px solid #eee;
            font-size: 14px;
          }
          .cell{
            flex:1;

            .radiobox{
              padding-left: 15px;
              position: relative;

              .radiocell{
                display: flex;
                position: relative;
                z-index:9;

                  li{
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    font-size: 14px;
                    color: #999;
                    transition: all 0.4s linear;
                  }
                  li.on{
                    color: #fff;
                  }
              }
              .moveblock{
                width: 26px;
                height: 26px;
                margin: 2px;
                position: absolute;
                left:15px;
                top: 0;
                z-index:1;
                background-color: #41B883;
                border-radius: 50%;
                transition: all .2s linear;
                transform: translateX(0px);
              }
            }
          .checkbox {
            padding-left:15px;

            .checkboxcell{
              display: flex;
              flex-wrap: wrap;
              line-height: 26px;
              padding-top: 3px;
              font-size:13px;
              color: #999;

              li{
                padding: 0 5px;
                margin-right: 5px;
                margin-bottom: 6px;
              }
              li.on{
              background-color: #41B883;
              color: #fff;
              border-radius: 3px;
              }
              li.warn{
                color: #41B883;
              }
            }
          }
          .selectbox{
            padding-left: 15px;
            padding-right: 10px;
            position: relative;

            select{
              border: none;
              width: 100%;
              height: 30px;
              outline:none;
            }
          }
          .textarea{
            box-sizing: border-box;
            width: 100%;
            height: 80px;
            line-height: 20px;
            padding: 5px 15px 0 10px;
            resize: none;
            font-size: 14px;
            border: none;
            outline: none;
          }
          }
        }
        .multiple_row{
          height: auto;
          padding: 5px 10px 5px 15px;
        }
        .textarea_row{
          height:90px;
          padding: 5px 10px 5px 15px;
        }
      }
      .sliderbox{
        height: 44px;
        margin-top: 15px;
        padding: 7px 5px 7px 15px;
        display: flex;
        background-color: #fff;

        .sliderdes{
          width: 110px;
          font-size:14px;
          line-height:30px;
        }
        .slidercomp {
          flex: 1;
          padding-top: 15px;

        }
      }
      .switchbox{
        margin-top: 15px;
        padding: 7px 15px;
        display: flex;
        background-color: #fff;

        .switchdes {
          flex:1;
          line-height: 30px;
          font-size: 14px;
        }
        .switchcomp{
          width: 52px;
        }
      }
      .formButton{
        padding: 15px;

        .button{
          width: 100%;
          height: 40px;
          line-height:40px;
          font-size:16px;
          text-align: center;
          border-radius: 3px;
          background-color: #41B883;
          color: #fff;
        }
      }
    }
  }
</style>
